var Legal = Vue.component('legal', {
    data() {
        return {
            editStatus: true,   // 是否可编辑判断
            sexType: [
                { value: 1, label: '男' },
                { value: 2, label: '女' },
            ],                      // 用户性别
            userInfoOld: {},        // 用户保存之前的值
            userInfo: {},           // 用户当前值
            imgs: [],
        }
    },

    template: `<div class="legal__box">
                    <div class="legal__con">
                        <h3 class="index__title legal__title">法人信息</h3>
                        <div :class="['index__info', {input__border: !editStatus}]">
                            <div class="legal__list">
                                <span>法人姓名：</span>
                                <input placeholder="" v-model="userInfo.legal_name" :disabled="editStatus">
                            </div>
                            <div class="legal__list">
                                <span>法人性别：</span>
                                <input v-if="editStatus" placeholder="" :value="userInfo.legal_sex | filterSex" :disabled="editStatus">

                                <select v-else v-model="userInfo.legal_sex">
                                    <option v-for="opt in sexType" :value="opt.value">{{ opt.label }}</option>
                                </select>
                                
                            </div>
                            <div class="legal__list">
                                <span>手机号码：</span>
                                <input placeholder="" v-model="userInfo.legal_mobile" :disabled="editStatus">
                            </div>
                            <div class="legal__list">
                                <span>身份证号码：</span>
                                <input placeholder="" v-model="userInfo.legal_idcard" :disabled="editStatus">
                            </div>
                            <div class="legal__list">
                                <span>身份证正面：</span>
                                <div class="legal__img">
                                    <img :src="userInfo.legal_idcard_imgs | filterImg(0)">
                                </div>
                                <div class="identity__img__btn" title="替换图片" style="margin-left: 20px;" v-show="!editStatus">
                                    <input type="file" data-index="0" @change="upLoadImg">
                                </div>
                            </div>
                            <div class="legal__list">
                                <span>身份证反面：</span>
                                <div class="legal__img">
                                    <img :src="userInfo.legal_idcard_imgs | filterImg(1)">
                                </div>
                                <div class="identity__img__btn" title="替换图片" style="margin-left: 20px;" v-show="!editStatus">
                                    <input type="file" data-index="1" @change="upLoadImg">
                                </div>
                            </div>
                            <div class="legal__list">
                                <span>身份证手持正面：</span>
                                <div class="legal__img">
                                    <img :src="userInfo.legal_idcard_imgs | filterImg(2)">
                                </div>
                                <div class="identity__img__btn" title="替换图片" style="margin-left: 20px;" v-show="!editStatus">
                                    <input type="file" data-index="2" @change="upLoadImg">
                                </div>
                            </div>
                        </div>
                        <div class="common__btn">
                            <div class="common__btn__box">
                                <span class="common__btn__sure" v-show="editStatus" @click="setEditFun">编辑</span>
                                <span class="common__btn__close" v-show="!editStatus" @click="setCancelFun">取消</span>
                                <span class="common__btn__sure" v-show="!editStatus" @click="updateUserInfo">保存设置</span>
                            </div>
                        </div>
                    </div>
                </div>`,

    filters: {
        filterSex: function(value) {
            // 过滤性别
            if(value == 1) {
                return '男';
            }else {
                return '女';
            }
        },
        filterImg: function(value, index) {
            if(!value || value == '') return;
            // 过滤照片地址
            var imgArr = value.split('|');
            return imgArr[index]
        }
    },

    methods: {
        setEditFun: function () {  // 编辑
            this.editStatus = !this.editStatus;
        },
        setCancelFun: function () { // 取消
            var data = JSON.stringify(this.userInfoOld);
            this.userInfo = JSON.parse(data);
            this.editStatus = !this.editStatus;
        },
        setInfoFun: function () { // 保存设置
            this.editStatus = !this.editStatus;
        },
        upLoadImg(e) {
            // 上传法人证件
            var _target = e.target;
            var _index = parseInt(_target.dataset.index);
            var imgData = this.userInfo.legal_idcard_imgs.split('|');
            var _files = _target.files[0];

            onUploadImg(_files, (res) => {
                if(res.code == 0) {
                    imgData[_index] = res.data.img;
                    this.userInfo.legal_idcard_imgs = imgData.join("|");
                }
            })
        },
        getUserInfo() {
            // 获取用户信息
            var self = this;
            $.ajax({
                type:"POST",
                url: _UrlPrefix + "/api/member/company/show",
                data: {
                    app_access: _AppAccess,
                    token: localStorage.getItem('token'),
                    token: localStorage.getItem('token'),
                    type: 2,
                    cate: 1,
                },
                success:function(res){
                    if(0 == res.code) {
                        var data = JSON.stringify(res.data);
                        self.userInfo = JSON.parse(data);
                        self.userInfoOld = JSON.parse(data);
                    }
                }
            })
        },
        updateUserInfo() {
            // 修改用户信息
            var self = this;
            var imgArr = this.userInfo.legal_idcard_imgs.split('|');
            var ageRange = [this.userInfo.ageStart, this.userInfo.ageEnd].toString();
            $.ajax({
                type:"POST",
                url: _UrlPrefix + "/api/member/company/modify",
                data: {
                    app_access: _AppAccess,
                    token: localStorage.getItem('token'),
                    type: 2,
                    cate: 1,
                    "comInfo[facType]": this.userInfo.facType,
                    "comInfo[realname]": this.userInfo.legal_name,
                    "comInfo[sex]": this.userInfo.legal_sex,
                    "comInfo[mobile]": this.userInfo.legal_mobile,
                    "comInfo[idcard]": this.userInfo.legal_idcard,
                    "comInfo[sfzzm]": imgArr[0],
                    "comInfo[sfzfm]": imgArr[1],
                    "comInfo[sfzsc]": imgArr[2],
                    "comInfo[comName]": this.userInfo.com_name,
                    "comInfo[comTel]": this.userInfo.com_tel,
                    "comInfo[comFax]": this.userInfo.com_fax,
                    "comInfo[comAddress]": this.userInfo.com_address,
                    "comInfo[comCity]": this.userInfo.comCity,
                    "comInfo[cusLike]": this.userInfo.cus_like,
                    "comInfo[quality]": this.userInfo.quality,
                    "comInfo[pact]": this.userInfo.pact,
                    "comInfo[param]": this.userInfo.param,
                    "comInfo[param2][scale]": this.userInfo.param2.scale,
                    "comInfo[param2][totalSale]": this.userInfo.param2.totalSale,
                    "comInfo[param2][yearSale]": this.userInfo.param2.yearSale,
                    "comInfo[param2][truck]": this.userInfo.param2.truck,
                    "comInfo[param2][brand]": this.userInfo.param2.brand,
                    "comInfo[outTypeStr]": this.userInfo.outType,
                    "comInfo[ageRange]": ageRange,
                    "comInfo[detail]": this.userInfo.detail,
                    "comInfo[position]": this.userInfo.position,
                },
                success:function(res){
                    console.log(res)
                    if(0 == res.code) {
                        ELEMENT.Message.success('保存成功');
                        self.editStatus = !self.editStatus;
                    }
                }
            })
        }
    },

    mounted() {

    },

    created() {
        // console.log(this.$route, '%%%')
        // 获取用户信息
        this.getUserInfo();
    },

})